<template>
    <div class="box-view screen-all flex">
        <el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>
        <el-input v-model="userInfo.mobile" placeholder="请输入手机号码"></el-input>

        <el-button @click="onSubmit">提交</el-button>
    </div>
</template>

<script lang="ts">
import { ref, Ref, reactive, onMounted, defineComponent } from 'vue';

export default defineComponent({
    components: {
        
    },

    setup () {

        const userInfo = reactive({
            name: '',
            mobile: '',
        })

        type nameType = string
        type sexType = string|number
        type ageType = number

        interface userType {
            name: nameType,
            sex?: '男'|'女',
            age?: ageType,
        }

        /**
         * 普通传参
         */
        const fun1 = (name: nameType, sex?: sexType, age: ageType = 18) => {

            console.log('fun1 params = ', name, sex, age);
        }

        /**
         * 对象传参，并解构
         * @param params 
         */
        const fun2 = (params: userType) => {
            let {
                name,
                sex,
                age = 18,
            } = { ...params };

            console.log('fun2 params = ', name, sex, age);
        }

        const onSubmit = () => {
            let params = {
                id: '7',
                ...userInfo,

                name: '易烊千玺',
            }
            console.log(params);
        }

        /**
         * 模拟调用接口
         * @param state true=接口调用成功  false=接口调用失败 
         */
        const requestObj = (state: number): Promise<any> => {
            return new Promise((resolve, reject) => {
                if(state === 1){
                    resolve({ status: 1, msg: '成功', data: 'success' });
                }else if(state === 2){
                    resolve({ status: 2, msg: '失败', data: 'error' });
                }else{
                    reject({ msg: '无效参数' });
                }
            });
        }

        onMounted(() => {
            // 普通方法传参
            fun1('小明', 1);
            // 使用对象传参
            fun2({ name: '小明', sex: '男' });

            requestObj(1)
                .then((res) => {
                    console.log('requestObj 1 =', res.status, res.msg, res.data);
                });

            requestObj(2)
                .then(({ status, msg, data }) => {
                    console.log('requestObj 2 =', status, msg, data);
                });

            requestObj(3)
                .then(({ status, msg, data }) => {
                    
                }).catch(({ status, msg, data }) => {
                    console.log('requestObj 3 =', status, msg, data);
                });
        })

        return {
            userInfo,
            onSubmit,
        }
    },
});
</script>
<style lang="scss" scoped>
    .box-view {
        background-color: white;
        font-size: 16px;
        color: #121212;
    }
</style>
